<template>
	<view class="lead">
		<!-- 上方大背景 -->
		<view class="top-back">
			<image
				src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/95a0d0b3-6e9e-4e53-9fbe-b5fb3d4f8f2cimage/jpg">
			</image>
			<view class="first-title">
				<text>{{testbar.name}}结果</text>				
			</view>
			<view class="second-title">
				<!-- <text style="font-style: italic; font-size: 50upx;">{{score}}分</text> -->
			</view>
		</view>
		<!-- 悬挂区域 -->
		<view class="hang-textra">
			<text>根据图标分析自己情况</text>
		</view>
		<view class="grades">
			<MyGrades></MyGrades>
		</view>
		<view class="personality">
			<Personality></Personality>
		</view>
	</view>
</template>

<script>
	import MyGrades from '../../components/MyGrades.vue'
	import Personality from '../../components/Personality.vue'
	import Mytest from '@/components/Mytest.vue'
	
	export default {
		components: {
			MyGrades,
			Personality,
			Mytest,
		},
		data() {
			return {
				textInsDataList: [{
						smalltitle: `你的性格,\u2000决定了你适合的工作`,
						detailCont: '找到自己的性格优势,走适合自己的路,才能把个人潜能发挥到极致,从工作中获得成就感'
					},
					{
						smalltitle: `跟别人比,\u2000你最大的优势在哪里?`,
						detailCont: '本次测试从动力、信息收集、决策方式、生活方式4个关键要素，结合职业性格、职业倾向，评估你的性格优劣势，推荐最适合你的工作岗位及发展建议'
					},
				],
				testbar:{},
				index: '',
				score: '',
			}
		},
		onLoad(options) {
			this.score= options.score
			this.index = options.index
			// console.log("grades-index",this.index)
			this.testbar = this.$store.state.test.testbar[this.index]
		},
		methods: {
			goDotest(){
				var uuid = this.testbar.uuid
				var index = this.index
				// console.log(uuid)
				uni.navigateTo({
					url: '/pages/Dotest/index?uuid='+uuid 
					// url:'/pages/Grades/index'
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.lead {
		width: 750rpx;
		height: 1400rpx;
		// overflow: hidden;
		.grades {
			width: 100%;
			height: 100px;
		}
		
		.personality {
			width: 100%;
			height: 100px;
			margin-top: 200px;
		}

		.top-back {
			width: 750rpx;
			height: 400rpx;
			background-color: antiquewhite;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.first-title {
				width: 100%;
				text-align: center;
				font-size: 50rpx;
				color: #fff;
				position: absolute;   
				// font-weight: 600;
				top: 80rpx;
				// left: 200rpx;
			}

			.second-title {
				font-size: 35rpx;
				color: #fff;
				position: absolute;
				top: 210rpx;
				left: 150rpx;
			}
		}

		// 
		.hang-textra {
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			// background-color: antiquewhite;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: relative;
			top: -40rpx;
			background-color: #fff;
			box-shadow: 2px 3px #ccc;

			view {
				margin-left: 10rpx;
				width: 240rpx;
				display: flex;
				align-items: center;
				font-size: 20rpx;
				// background-color: aqua;
				margin-left: 12rpx;

				.left-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 5rpx;
					// background-color: #ccc;

					image {
						width: 100%;
						height: 100%;

					}

				}
				view {
					width: 2rpx;
					height: 10rpx;
				}
			}
		}

		// 
		.text-instroduce {
			width: 750rpx;
			height: auto;
			overflow-y: auto;

			.big-title {
				width: 500rpx;
				height: 70rpx;
				margin: 0 auto;

				.small-title {
					width: 200rpx;
					margin: 0 auto;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 550;
				}

				// 
				.bottom {
					width: 80rpx;
					height: 8rpx;
					background-color: #dc5a5a;
					margin: 0 auto;
				}
			}
		}
	}
</style>
